<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.72/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.72/Cesium.js"></script>
    <script src="./CesiumVectorTile.js"></script>
    <script src="./jquery-1.8.3.min.js"></script>

</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});
        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;

        var config = {
            url: {
                shp: "./shp/china.shp",
                dbf: "./shp/china.dbf",
                prj: "./shp/china.prj"
            },
            name: {
                shp: "china.shp",
                dbf: "china.dbf",
                prj: "china.prj"
            },
            style: {
                outlineColor: "rgb(1,255,0)",
                lineWidth: 5,
                fill: true
            },
            isFlyTo: true,
            minimumLevel: 1,
            maximumLevel: 20
        }
        Cesium.when.all([
            Cesium.Resource.fetchBlob(config.url.shp),
            Cesium.Resource.fetchBlob(config.url.dbf),
            Cesium.Resource.fetchBlob(config.url.prj),
        ], function (files) {
            files[0].name = config.name.shp
            files[1].name = config.name.dbf
            files[2].name = config.name.prj
            var shpProvider = new Cesium.VectorTileImageryProvider({
                source: files,
                credit: "credit",
                defaultStyle: config.style,
                minimumLevel: config.minimumLevel,
                maximumLevel: config.maximumLevel
            });
            shpProvider.readyPromise.then(function () {
                var layer = viewer.imageryLayers.addImageryProvider(shpProvider);
                if (config.isFlyTo) {
                    viewer.flyTo(layer);
                }
            });
        });

    </script>
</body>

</html>